<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 顶部区域 -->
      <a-col :span="24">
        <a-card>
          <!-- 查询参数 -->
          <go2-query v-if="false" :searchParam="searchParam" @on-search="search"></go2-query>
        </a-card>
      </a-col>
      <!-- 中心区域 -->

      <a-col :span="24">
        <a-card>
          <a-alert
            :message="t('config in permission')"
            type="info"
            show-icon
            closable
          />
          <!-- 列表 -->
          <go2-table
            ref="tableRef"
            rowKey="id"
            :tableLayout="'fixed'"
            :fetch="fetch"
            :columns="columns"
            :toolbar="toolbar"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
            :row-selection="{
              selectedRowKeys: state.selectedRowKeys,
              onChange: onSelectChange,
            }"
          >
            <!-- 继承至 a-table 的默认插槽 -->
          </go2-table>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>

<script>
import { useI18n } from "vue-i18n";
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { list, remove, batchRemove } from "@/core/api/module/SysRecord";
import { reactive, createVNode, ref, toRaw } from "vue";

const removeKey = "remove";
const removeBatchKey = "removeBatch";

export default {
  components: {},
  setup() {
    const { t } = useI18n();
    const tableRef = ref();

    /// 删除配置
    const removeMethod = (record) => {
      Modal.confirm({
        title: t("confirm") + t("delete") + "?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: t("ok"),
        cancelText: t("cancel"),
        onOk() {
          message.loading({ content: t("loading"), key: removeKey });
          remove({ id: record.id }).then((response) => {
            if (response.code == 0) {
              message
                .success({ content: t("sucess"), key: removeKey, duration: 1 })
                .then(() => {
                  tableRef.value.reload();
                });
            } else {
              message.error({
                content: response.msg,
                key: removeKey,
                duration: 1,
              });
            }
          });
        },
      });
    };

    //批量删除
    const batchremoveMethod = () => {
      const romovekeys = toRaw(state.selectedRowKeys);
      if (romovekeys.length <= 0) {
        message.error({
          content: t("please chose"),
          key: removeBatchKey,
          duration: 1,
        });
        return false;
      }
      Modal.confirm({
        title: t("confirm") + t("delete") + "?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: t("ok"),
        cancelText: t("cancel"),
        onOk() {
          message.loading({ content: t("loading"), key: removeBatchKey });
          batchRemove({ id: romovekeys }).then((response) => {
            if (response.code == 0) {
              message
                .success({
                  content: t("sucess"),
                  key: removeBatchKey,
                  duration: 1,
                })
                .then(() => {
                  tableRef.value.reload();
                });
            } else {
              message.error({
                content: t(response.msg),
                key: removeBatchKey,
                duration: 1,
              });
            }
          });
        },
      });
    };

    /// 列配置
    const columns = [
      { dataIndex: "username", key: "username" },
      { dataIndex: "url", key: "url" },
      { dataIndex: "desc", key: "desc" },
      { dataIndex: "ip", key: "ip" },
      { dataIndex: "request", key: "request", width: "200px", ellipsis: true },
      {
        dataIndex: "create_time",
        key: "create_time",
        format: { type: "date", value: "YYYY-MM-DD HH:mm:ss" },
      },
    ];

    /// 数据来源
    const fetch = async (param) => {
      var response = await list(param);
      if (response.code != 0) {
        message.error({ content: response.msg, duration: 1 });
      }
      return { data: response.data };
    };
    /// 工具栏
    const toolbar = [
      {
        label: "add",
        code: "sys.log:add",
        event: function () {
          state.visibleAdd = true;
        },
      },
      {
        label: "batchRemove",
        code: "sys.log:batchRemove",
        event: batchremoveMethod,
      },
    ];

    /// 行操作
    const operate = [];

    /// 分页参数
    const pagination = reactive({
      pageSize: 20,
      page: 1,
    });
    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleAdd: false,
      visibleEdit: false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
    });

    /// 查询参数
    const searchParam = [
      { key: "username", type: "input", label: "username" },
      { key: "url", type: "input", label: "url" },
      { key: "desc", type: "input", label: "desc", hidden: true },
      // { key: "create_time", type: "timePicker", label: "create_time", hidden: true},
    ];

    /// 查询操作
    const search = function (value) {
      state.param = value;
    };

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeAdd = function (e) {
      state.visibleAdd = false;
      if (e) {
        tableRef.value.reload();
      }
    };

    const closeEdit = function (e) {
      state.visibleEdit = false;
      if (e) {
        tableRef.value.reload();
      }
    };

    const closeInfo = function (e) {
      state.visibleInfo = false;
      if (e) {
        tableRef.value.reload();
      }
    };

    return {
      t,
      state,
      fetch,
      search,
      toolbar,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,
      closeAdd,
      closeEdit,
      closeInfo,
      tableRef,
    };
  },
};
</script>